import React, { useEffect, useState } from 'react'
import Son from './components/Son'
export default function App() {
  console.log('App Run');
  let [count, setCount] = useState(99)
  let [msg, setMsg] = useState('hello')
  // 1，只执行一次，这种写法可以用来模拟组件挂载阶段
  useEffect(()=> {
    console.log('useEffect');
  },[])
  console.log('App Run');
  // 2，只有当count的值变化的时候才执行，即[]内的数据变化时，才能够执行
  useEffect(()=> {
    console.log('useEffect');
  },[count])
  // 3, 没有参数时，则表示监听所有的数据变化
  useEffect(()=> {
    console.log('useEffect');
  },[count])
  // 4，内部执行的回调函数,可以模拟即将卸载的状态周期

  return (
    <div>
      <h2>App</h2>
      <p>count: {count}</p>
      <button onClick={()=> setCount(count + 1)}>count ++</button>
      <p>msg: {msg}</p>
      <button onClick= {()=> setMsg(msg + '!')}>msg + ！</button>
      {count % 2 === 0 && <Son count={count}></Son>}
      
    </div>
  )
}
